<!DOCTYPE HTML>
<html lang="en">
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta charset="utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.0/jsoneditor.min.js" integrity="sha512-/yeOsMWLc/SZcBuEbAGCk0OVK/NFWRiYALj7mVZtgCOV+6l8TzNjbH6iW3hSIAjvCg7NdZUNQEXT7JdL/eojpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.0/jsoneditor.min.css" integrity="sha512-lpLPwXw3BtM5V9wei2+YTTq3tfsbIqgynccXaHp/bJCshEb360kCjJ/DeXhqnXKBtSV7s+V3pVj2j5y3T4CmSA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div align="center">
    <div id="jsoneditor" style="width: 800px; height: 800px;"></div>
</div>


<script>
    // create the editor
    const container = document.getElementById("jsoneditor")
    const options = {}
    const editor = new JSONEditor(container, options)
    new Vue({
        data(){
            return{
                routeList:[],
            }
        },
        methods:{

        },

        created(){
            axios
                .get('http://localhost:8080/route/list')
                .then(res => {
                    const initialJson = {
                        "根": res.data
                    }
                    editor.set(initialJson)
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            // get json
            // const updatedJson = editor.get()
        }
    })
</script>
</body>
</html>